<script setup>
import { reactive, ref, watch } from 'vue'
import { EditPen, Operation, Delete } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router'
import { getDeviceList, deleteDevice } from '@/assets/api/device'
import newModal from '@/components/fireControl/deviceNew.vue'
import { showMsg, showConfirm } from '@/assets/js/utils'
import config from '@/assets/js/config'
// import { saveAs } from 'file-saver'
const router = useRouter()
const route = useRoute()
const currentPage = ref(1)
const pageSize = 10
const total = ref(0)
const dataList = ref([])
const deviceClassify = 2
const deviceClassId = ref(route.params.deviceClass)
const loading = ref(false)
const filterForm = reactive({
    deviceClassify,
    deviceClass: deviceClassId.value,
})
const noData = ref(false)
//获取列表
function getData(page = 1) {
    loading.value = true
    const params = Object.assign(
        {
            page,
            limit: pageSize,
            is_children: 2,
        },
        filterForm
    )
    getDeviceList(params).then((res) => {
        loading.value = false
        const { Items, totalSize } = res.data
        dataList.value = Items
        currentPage.value = res.data.currentPage
        total.value = totalSize
        noData.value = totalSize == 0 ? true : false
    })
}
watch(route, () => {
    deviceClassId.value = route.params.deviceClass
    if (
        deviceClassId.value &&
        route.path == `/fireControl/equipment/${deviceClassId.value}`
    ) {
        filterForm.deviceClass = deviceClassId.value
        getData()
    }
})
getData(1)
const activeData = ref(null)
const newModalVisible = ref(false)
const newModalTitle = ref('')
function newAction() {
    activeData.value = null
    newModalVisible.value = true
    newModalTitle.value = '新增设备'
}
function editAction(item) {
    activeData.value = item
    newModalTitle.value = '编辑设备'
    newModalVisible.value = true
}
function onAddSuccess() {
    getData(currentPage.value)
}
function handleCurrentChange(e) {
    //换页
    getData(e)
}
function goListPage(item) {
    router.push(
        `/fireControl/device/${route.params.deviceClass}?number=${item.number}`
    )
}
function deleteAction(item) {
    //删除
    showConfirm({
        content: '您确定要删除该数据吗',
        onConfirm: () => {
            deleteDevice({ id: item.id }).then(() => {
                showMsg('删除成功')
                getData(currentPage.value)
            })
        },
    })
}
function searchAction() {
    //搜索
    getData(1)
}
function downloadAction() {
    window.open(`${config.baseApi}/download/deviceTemplateDownload`)
}
// 导入
const importModalVisible = ref(false)
import importModal from '@/components/fireControl/deviceImport.vue'
function onImportSuccess() {
    getData(currentPage.value)
}
function deviceControl() {
    // const strData = 'C02YV5JJLVDQ'
    // const result = new Blob([strData], { type: 'text/plain;charset=utf-8' })
    // // 导出
    // saveAs(result, `文件1.txt`)
}
const currentState = new Map([
    ['1', '●正常'],
    ['2', '●报警'],
    ['3', '●离线'],
    ['4', '●故障'],
])
const currentStyle = new Map([
    ['1', ''],
    ['2', 'color:#c30d0d;background:rgb(255 155 155)'],
    ['3', 'color:#7D7D7D;background:#B5B5B5'],
    ['4', 'color:#7D7D7D;background:#B5B5B5'],
])
const ruleFormRef = ref()
function resetcAction(formEl) {
    // delete filterForm.name
    // delete filterForm.nubmer
    // delete filterForm.current_state
    // console.log(filterForm, 'filterForm')//之前重置搜索
    if (!formEl) return
    formEl.resetFields()
}
</script>
<template>
    <div class="filter-box white-box d-flex">
        <el-form
            :inline="true"
            :model="filterForm"
            class="d-flex-1"
            ref="ruleFormRef"
        >
            <el-form-item label="设备名称" prop="name">
                <el-input v-model="filterForm.name" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="设备号" prop="number">
                <el-input v-model="filterForm.number" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="设备状态" prop="currentState">
                <el-select
                    v-model="filterForm.currentState"
                    placeholder="请选择"
                >
                    <el-option label="正常" value="1" />
                    <el-option label="报警 " value="2" />
                    <el-option label="离线 " value="3" />
                    <el-option label="故障 " value="4" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchAction">搜索</el-button>
                <el-button
                    type="primary"
                    plain
                    @click="resetcAction(ruleFormRef)"
                >
                    重置
                </el-button>
            </el-form-item>
        </el-form>
        <div class="el-form-item">
            <el-button type="primary" @click="newAction">新增</el-button>
            <el-button type="primary" @click="importModalVisible = true">
                设备导入
            </el-button>
            <!-- <el-button type="primary" @click="exportAction"> 导出 </el-button> -->
            <el-button type="primary" @click="downloadAction">
                模板下载
            </el-button>
        </div>
    </div>
    <div class="white-box mt-20 d-flex-1 overflow-auto flex-column-bw">
        <el-empty description="暂无数据" v-if="noData" />
        <el-row :gutter="20">
            <el-col :span="6" v-for="(item, index) in dataList" :key="index">
                <div class="equipmenItem white-box border">
                    <div
                        class="type"
                        :style="[currentStyle.get(item.current_state)]"
                    >
                        {{ currentState.get(item.current_state) }}
                    </div>
                    <div class="fw-b fs-20">{{ item.name }}</div>
                    <div class="d-flex-1 d-flex mt-10">
                        <img
                            class="equipmenItem_icon"
                            src="@/assets/images/icon-device.png"
                        />
                        <div>
                            <div class="ml-10 mb-10">
                                <div class="gray_font mb-3">设备类型</div>
                                <div class="fs-16">
                                    {{ item.device_type_name }}
                                </div>
                            </div>
                            <div class="ml-10">
                                <div class="gray_font">设备号</div>
                                <div class="fs-16">{{ item.number }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="operat d-flex-around mt-10 mb-10">
                    <el-button
                        @click="editAction(item)"
                        type="primary"
                        :icon="EditPen"
                        color="#F5F5F6"
                        class="border"
                        small
                        >编辑</el-button
                    >
                    <el-button
                        @click="deviceControl(item)"
                        type="primary"
                        :icon="Operation"
                        color="#F5F5F6"
                        class="border"
                        small
                        >控制</el-button
                    >
                    <el-button
                        type="primary"
                        :icon="EditPen"
                        color="#F5F5F6"
                        class="border"
                        small
                        >数据</el-button
                    >
                    <el-button
                        v-if="item.device_type == '1111'"
                        type="primary"
                        :icon="EditPen"
                        color="#F5F5F6"
                        class="border"
                        small
                        @click="goListPage(item)"
                        >设备</el-button
                    >
                    <el-button
                        @click="deleteAction(item)"
                        :icon="Delete"
                        style="color: red; padding: 5px 10px"
                    />
                </div>
            </el-col>
        </el-row>
        <div class="fl-bw">
            <div></div>
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                layout="prev, pager, next, jumper"
                v-model:total="total"
                @current-change="handleCurrentChange"
                v-if="total > 0"
            />
        </div>
    </div>
    <newModal
        v-model:visible="newModalVisible"
        v-if="newModalVisible"
        :title="newModalTitle"
        :deviceId="activeData && activeData.id"
        :deviceClassId="deviceClassId"
        deviceClassify="2"
        @success="onAddSuccess"
    ></newModal>
    <!-- 导入 -->
    <importModal
        v-model:visible="importModalVisible"
        v-if="importModalVisible"
        :deviceClassId="deviceClassId"
        deviceClassify="2"
        @success="onImportSuccess"
    ></importModal>
</template>
<style lang="scss" scoped>
::v-deep(.operat .el-button--primary) {
    color: #1835c3 !important;
    padding: 5px 10px !important;
    font-size: 16px !important;
    // margin-left: 11px !important;
    width: 30%;
}
</style>
